import 'package:flutter/material.dart';
import 'package:portal_website/pages/common_header.dart';

class ModelCenterPage extends StatefulWidget {
  const ModelCenterPage({super.key});

  @override
  State<ModelCenterPage> createState() => _ModelCenterPageState();
}

class _ModelCenterPageState extends State<ModelCenterPage> {
  String _activeSection = 'home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: Container(
        margin: EdgeInsets.only(top: 50),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 面包屑
              Breadcrumb(
                text: "首页 > 服务平台 > 模型中枢",
              ),
              // 主要内容区
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 侧边栏
                  _buildSidebar(),
                  // 主内容
                  Expanded(child: _buildMainContent()),
                ],
              ),
              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  // 导航菜单
  Widget _buildNavigation() {
    return Row(
      children: [
        _navItem('首页'),
        _navItem('智算中心'),
        _navItem('知识中枢'),
        _navItem('模型中枢', isActive: true),
        _navItem('联系我们'),
      ],
    );
  }

  // 导航项
  Widget _navItem(String title, {bool isActive = false}) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: Text(
        title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 16,
          fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
        ),
      ),
    );
  }

  // 侧边栏
  Widget _buildSidebar() {
    return Container(
      width: 250,
      padding: const EdgeInsets.all(20),
      margin: const EdgeInsets.only(right: 30),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '模型中枢',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFFF0F0F0),
              decorationThickness: 2,
            ),
          ),
          const SizedBox(height: 20),
          _sidebarItem('首页', 'home'),
          _sidebarItem('建设概况', 'construction'),
          _sidebarItem('政策资讯', 'policy'),
          _sidebarItem('活动报道', 'activity'),
          _sidebarItem('服务介绍', 'service'),
        ],
      ),
    );
  }

  // 侧边栏项
  Widget _sidebarItem(String title, String section) {
    final isActive = _activeSection == section;
    return Padding(
      padding: const EdgeInsets.only(bottom: 15),
      child: InkWell(
        onTap: () {
          setState(() {
            _activeSection = section;
          });
        },
        borderRadius: const BorderRadius.all(Radius.circular(4)),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
          decoration: BoxDecoration(
            color: isActive ? const Color(0xFFF0F7FF) : Colors.transparent,
            borderRadius: const BorderRadius.all(Radius.circular(4)),
          ),
          child: Row(
            children: [
              if (isActive)
                const Padding(
                  padding: EdgeInsets.only(right: 8),
                  child: VerticalDivider(
                    width: 4,
                    thickness: 4,
                    color: Color(0xFF207CCA),
                  ),
                ),
              Text(
                title,
                style: TextStyle(
                  color: isActive
                      ? const Color(0xFF1E5799)
                      : const Color(0xFF555555),
                  fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 主内容区
  Widget _buildMainContent() {
    return Container(
      padding: const EdgeInsets.all(30),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: _getSectionContent(),
    );
  }

  // 根据当前激活的部分显示对应内容
  Widget _getSectionContent() {
    switch (_activeSection) {
      case 'home':
        return _buildHomeSection();
      case 'construction':
        return _buildConstructionSection();
      case 'service':
        return _buildServiceSection();
      default:
        return _buildHomeSection();
    }
  }

  // 首页内容
  Widget _buildHomeSection() {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '模型中枢',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 28,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFFF0F0F0),
              decorationThickness: 2,
            ),
          ),
          const SizedBox(height: 20),
          const Text(
            '汇聚优质AI模型资源，提供一站式模型开发、部署和应用服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          // 介绍图片
          Container(
            height: 300,
            decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            ),
            child: const Center(
              child: Text(
                '模型中枢',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 24,
                ),
              ),
            ),
          ),
          const SizedBox(height: 20),
          // 内容文本
          const Text(
            '模型中枢是创新服务平台的核心AI模型资源库，集成了机器学习、深度学习和传统算法模型，为企业和开发者提供模型开发、训练、部署和应用的全流程支持。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
          const SizedBox(height: 16),
          const Text(
            '中枢汇聚了超过1000个预训练模型，覆盖计算机视觉、自然语言处理、语音识别、推荐系统等多个领域。我们的模型库持续更新，包含来自学术界和产业界的最新研究成果。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
          const SizedBox(height: 16),
          const Text(
            '模型中枢提供从模型选择、微调训练到服务部署的一站式解决方案，大幅降低AI技术应用门槛，加速企业智能化转型。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
          const SizedBox(height: 30),
          // 精选模型
          const Text(
            '精选模型',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 30),
          // 模型网格
          _buildModelGrid(),
        ],
      ),
    );
  }

  // 模型网格
  Widget _buildModelGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: 3,
      crossAxisSpacing: 20,
      mainAxisSpacing: 20,
      childAspectRatio: 1.2,
      children: [
        _buildModelCard(
          title: '图像分类模型',
          description: 'ResNet、EfficientNet等经典图像分类模型，支持迁移学习和自定义分类任务。',
          tags: ['计算机视觉', '预训练模型'],
        ),
        _buildModelCard(
          title: '目标检测模型',
          description: 'YOLO、Faster R-CNN等目标检测模型，支持多种场景下的物体识别和定位。',
          tags: ['计算机视觉', '实时检测'],
        ),
        _buildModelCard(
          title: '文本分类模型',
          description: 'BERT、RoBERTa等预训练语言模型，支持文本分类、情感分析等任务。',
          tags: ['自然语言处理', 'Transformer'],
        ),
        _buildModelCard(
          title: '语音识别模型',
          description: 'DeepSpeech、Wav2Vec等语音识别模型，支持多语种语音转文字。',
          tags: ['语音处理', '端到端模型'],
        ),
        _buildModelCard(
          title: '推荐系统模型',
          description: 'Wide & Deep、DeepFM等推荐算法，支持个性化推荐和广告投放。',
          tags: ['推荐系统', 'CTR预测'],
        ),
        _buildModelCard(
          title: '时间序列预测',
          description: 'Prophet、LSTM等时间序列模型，支持销售预测、设备预警等场景。',
          tags: ['预测分析', '时序数据'],
        ),
      ],
    );
  }

  // 模型卡片
  Widget _buildModelCard({
    required String title,
    required String description,
    required List<String> tags,
  }) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        border: Border.all(color: const Color(0xFFE0E9FF)),
        borderRadius: const BorderRadius.all(Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: const Offset(0, 5),
            spreadRadius: -10,
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            description,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          Wrap(
            spacing: 5,
            children: tags.map((tag) {
              return Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                decoration: BoxDecoration(
                  color: const Color(0xFFE0E9FF),
                  borderRadius: const BorderRadius.all(Radius.circular(4)),
                ),
                child: Text(
                  tag,
                  style: const TextStyle(
                    color: Color(0xFF1E5799),
                    fontSize: 12,
                  ),
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }

  // 建设概况内容
  Widget _buildConstructionSection() {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '建设概况',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 28,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFFF0F0F0),
              decorationThickness: 2,
            ),
          ),
          const SizedBox(height: 20),
          const Text(
            '模型中枢的发展历程与技术架构',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          // 介绍图片
          Container(
            height: 300,
            decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            ),
            child: const Center(
              child: Text(
                '模型中枢建设',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 24,
                ),
              ),
            ),
          ),
          const SizedBox(height: 20),
          // 内容文本
          const Text(
            '模型中枢于2023年启动建设，总投资2亿元人民币，是区域首个专注于AI模型资源共享和服务的公共平台。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
          const SizedBox(height: 16),
          const Text(
            '中枢建设分为三个阶段：一期工程（2023年）完成了基础平台搭建和核心模型库建设；二期工程（2024年）实现了模型训练和部署的自动化流程；三期工程（2025年）将重点打造行业专用模型和联邦学习能力。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
          const SizedBox(height: 16),
          const Text(
            '目前，模型中枢已整合了来自50多个开源项目和30多家企业的模型资源，服务用户超过5000家，日均模型调用量超过10万次。',
            style: TextStyle(
              color: Color(0xFF555555),
              fontSize: 16,
              height: 1.8,
            ),
          ),
          const SizedBox(height: 30),
          // 技术架构
          const Text(
            '技术架构',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 30),
          // 架构图
          Container(
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                Container(
                  height: 500,
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: const BorderRadius.all(Radius.circular(8)),
                  ),
                  child: const Center(
                    child: Text(
                      '模型中枢技术架构图',
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 24,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 30),
          // 技术栈
          GridView.count(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount: 3,
            crossAxisSpacing: 20,
            mainAxisSpacing: 20,
            childAspectRatio: 1.2,
            children: [
              _buildTechItem(
                icon: '🧠',
                title: '模型仓库',
                description: '集中管理各类AI模型，支持版本控制和元数据管理',
              ),
              _buildTechItem(
                icon: '⚙️',
                title: '训练平台',
                description: '提供分布式训练环境，支持主流深度学习框架',
              ),
              _buildTechItem(
                icon: '🚀',
                title: '推理服务',
                description: '高性能模型推理引擎，支持多种部署方式',
              ),
              _buildTechItem(
                icon: '📊',
                title: '监控系统',
                description: '实时监控模型性能和数据质量',
              ),
              _buildTechItem(
                icon: '🔄',
                title: '持续集成',
                description: '自动化模型训练、测试和部署流程',
              ),
              _buildTechItem(
                icon: '🔒',
                title: '安全机制',
                description: '模型加密和访问控制，保障模型安全',
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 技术项
  Widget _buildTechItem({
    required String icon,
    required String title,
    required String description,
  }) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        border: Border.all(color: const Color(0xFFE0E9FF)),
        borderRadius: const BorderRadius.all(Radius.circular(8)),
      ),
      child: Column(
        children: [
          Text(
            icon,
            style: const TextStyle(fontSize: 36, color: Color(0xFF207CCA)),
          ),
          const SizedBox(height: 15),
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            description,
            textAlign: TextAlign.center,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  // 服务介绍内容
  Widget _buildServiceSection() {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '服务介绍',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 28,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
              decorationColor: Color(0xFFF0F0F0),
              decorationThickness: 2,
            ),
          ),
          const SizedBox(height: 20),
          const Text(
            '模型中枢提供的各类模型服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          // 服务列表
          Column(
            children: [
              _buildServiceItem(
                title: '模型开发服务',
                imageText: '模型开发',
                description:
                    '提供从数据准备、特征工程到模型训练的全流程开发环境。支持主流深度学习框架，提供丰富的预训练模型和开发工具，大幅提升模型开发效率。',
                features: ['可视化开发界面', '自动化特征工程', '分布式训练支持'],
                scenarios: ['定制化模型开发', '算法研究', 'POC验证等'],
              ),
              const SizedBox(height: 30),
              _buildServiceItem(
                title: '模型训练服务',
                imageText: '模型训练',
                description:
                    '提供强大的计算资源支持模型训练，支持自动化超参数优化和模型调优。我们的训练平台可以高效利用GPU/TPU资源，加速模型收敛。',
                features: ['弹性计算资源', '自动调参', '训练监控'],
                scenarios: ['大规模模型训练', '模型微调', '对比实验等'],
              ),
              const SizedBox(height: 30),
              _buildServiceItem(
                title: '模型部署服务',
                imageText: '模型部署',
                description:
                    '提供灵活的模型部署方案，支持云端API、边缘设备和私有化部署。我们的推理引擎经过深度优化，能够实现高并发、低延迟的模型服务。',
                features: ['多种部署方式', '自动扩缩容', '性能监控'],
                scenarios: ['在线推理服务', '边缘计算', '企业级应用等'],
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 服务项
  Widget _buildServiceItem({
    required String title,
    required String imageText,
    required String description,
    required List<String> features,
    required List<String> scenarios,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 15),
        Container(
          decoration: const BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: Color(0xFFF0F0F0),
                width: 1,
              ),
            ),
          ),
          padding: const EdgeInsets.only(bottom: 10),
        ),
        const SizedBox(height: 15),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 服务图片
            Container(
              width: 300,
              height: 200,
              margin: const EdgeInsets.only(right: 20),
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: const BorderRadius.all(Radius.circular(8)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 10,
                    offset: const Offset(0, 3),
                  ),
                ],
              ),
              child: Center(
                child: Text(
                  imageText,
                  style: const TextStyle(
                    color: Colors.grey,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
            // 服务文本
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    description,
                    style: const TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 15,
                      height: 1.8,
                    ),
                  ),
                  const SizedBox(height: 16),
                  Text(
                    '服务特点：${features.join('、')}',
                    style: const TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 15,
                      height: 1.8,
                    ),
                  ),
                  const SizedBox(height: 16),
                  Text(
                    '适用场景：${scenarios.join('、')}',
                    style: const TextStyle(
                      color: Color(0xFF555555),
                      fontSize: 15,
                      height: 1.8,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

  // 页脚
  Widget _buildFooter() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(top: 50),
      decoration: const BoxDecoration(
        color: Color(0xFF1A1A2E),
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
      child: Column(
        children: [
          // 页脚链接
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _footerLink('关于我们'),
              _footerLink('服务条款'),
              _footerLink('隐私政策'),
              _footerLink('帮助中心'),
              _footerLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2025 创新服务平台模型中枢 版权所有',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：models@innovationservice.com',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  // 页脚链接
  Widget _footerLink(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Text(
        text,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }
}
